<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="wap-font-scale" content="no">
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title><?=$title?></title>
    <link rel="stylesheet" href="/mobile/css/reset.css">
    <link rel="stylesheet" href="/mobile/css/mui.min.css">
    <link rel="stylesheet" href="/mobile/css/main_train.css">
    <script src="/mobile/js/flexible_css.debug.js"></script>
    <script src="/mobile/js/flexible.debug.js"></script>

    <style>
        #questions-form-wrap{
            visibility: hidden;
        }
    </style>
</head>
<body>
<div id="back-btn-wrap">
    <a class="back-btn" href="javascript:void(0)"></a>试卷编辑
</div>

<div class="content-main">

    <form action="" data-qid="" id="questions-form-wrap" onsubmit="return false;">
        <div class="options-wrap multiple-wrap">
            <label for="optionA">单选</label><input type="radio" value="1" name="type" id="">
            <label for="optionB">多选</label><input value="2" type="radio" name="type" id="">
        </div>
        <ul class="questions-wrap">
            <li class="questions-item clearfix"><span class="fl">1</span> <textarea name="question" id="question" placeholder="编辑题目"></textarea></li>
            <li class="option-item clearfix"><span class="fl">A</span> <textarea name="contentA" id="contentA" placeholder="编辑选项内容"></textarea></li>
            <li class="option-item clearfix"><span class="fl">B</span> <textarea name="contentB" id="contentB" placeholder="编辑选项内容"></textarea></li>
            <li class="option-item clearfix"><span class="fl">C</span> <textarea name="contentC" id="contentC" placeholder="编辑选项内容"></textarea></li>
            <li class="option-item clearfix"><span class="fl">D</span> <textarea name="contentD" id="contentD" placeholder="编辑选项内容"></textarea></li>
        </ul>

        <div class="options-wrap">
            <span>正确答案：</span><label for="optionA">A</label><input type="radio" value="1" name="correct-options" id="optionA"><label for="optionB">B</label><input value="2" type="radio" name="correct-options" id="optionB"><label for="optionC">C</label><input value="3" type="radio" name="correct-options" id="optionC"><label for="optionC">D</label><input value="4" type="radio" name="correct-options" id="optionD">
        </div>

        <div class="btn-del">删除题目</div>
        <div class="btn2-wrap">
            <button id="btn-submit" class="btn2" onclick="">提交</button>
        </div>
    </form>
</div>

<script src="/mobile/js/jquery.min.js"></script>
<script src="/mobile/js/common.js"></script>
<script src="/mobile/js/mui.min.js"></script>
<script src="/mobile/js/jrrpc.js"></script>
<script src="/mobile/js/autosize.js"></script>
<script src="/mobile/js/jQueryValidate/jquery.validate.min.js"></script>
<script src="/mobile/js/jQueryValidate/jquery.validate.method.js"></script>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

<script>
    function exitEdit(){
        var llid = iService.getQueryString('llid'),
            token = iService.getQueryString('token');
        window.location.href = 'preview?token='+token+'&llid='+llid+'';
        /*var btnArray = ['确定', '取消'];
        mui.confirm('题目尚未提交，退出将会清除所有编辑，你确定退出吗', '退出编辑', btnArray, function(e) {
            if (e.index == 1) {
            //继续答题 不做处理
            } else {
                if(iService.getUserAgent().isiOS){
                    editFinishPaper(0);
                }else {
                    h5button.editFinishPaper(0);
                }
            }
        });*/
    }
    $(function(){
        mui.init();

        //单选多选
        var que_type = $("input[name='type']");
        que_type.on('change',function(){
            var type = $('input[name=type]:checked').val();
            if(type==1){
                $('input[name=correct-options]').attr('type','radio');

            }else if(type==2){
                $('input[name=correct-options]').attr('type','checkbox');
            }
        });

        $('input[name=correct-options]').on('change',function(){
            console.log($('input[name=correct-options]:checked'));
            var option_choose = $('input[name=correct-options]:checked');
            var option_str = '';
            $.each(option_choose,function(e){
                option_str+=$(this).val()+',';
            });
            option_str.slice(0,option_str.length-1);
        });

        var appParam = iService.getAppParam();

        $(".back-btn").on('click',exitEdit);

        //验证元素
        var validateElement = {
            onkeyup: false,
            onclick: false,
            onfocusout: false,
            onsubmit:false,
            showErrors: function (errorMap, errorList) {
                if (errorList.length > 0) {
                    mui.alert(errorList[0].message,' ',function(){
                    });
                }
            },
            rules: {
                question: {
                    required: true,
                    rangelength:[4,64]
                },
                contentA: {
                    required: true,
                    rangelength:[2,32]
                },
                contentB: {
                    required: true,
                    rangelength:[2,32]
                },
                contentC: {
                    required: true,
                    rangelength:[2,32]
                },
                contentD: {
                    required: true,
                    rangelength:[2,32]
                },
                password: {
                    required: true,
                    minlength: 5
                },
                'correct-options':{
                    required: true
                }
            },
            messages: {
                question: {
                    required: "题目不可为空",
                    rangelength:"题目内容长度为4-64个字符"
                },
                contentA: {
                    required: "选项A不可为空",
                    rangelength:"选项内容长度为2-32个字符"
                },
                contentB: {
                    required: "选项B不可为空",
                    rangelength:"选项内容长度为2-32个字符"
                },
                contentC: {
                    required: "选项C不可为空",
                    rangelength:"选项内容长度为2-32个字符"
                },
                contentD: {
                    required: "选项D不可为空",
                    rangelength:"选项内容长度为2-32个字符"
                },
                'correct-options':{
                    required: '正确选项不可为空'
                }
            }
        };

        function coverQuestion(que_arr,que_cur){
            $('input[name=type]').get(que_arr[que_cur].type-1).checked = true;
            $(".questions-wrap").html(
                '<li class="questions-item clearfix"><span class="fl">'+(que_cur+1)+'</span> <textarea name="question" id="question" placeholder="编辑题目">'+que_arr[que_cur].topic+'</textarea></li>'+
                '<li class="option-item clearfix"><span class="fl">A</span> <textarea name="contentA" id="contentA" placeholder="编辑选项内容">'+que_arr[que_cur].option_a+'</textarea></li>'+
                '<li class="option-item clearfix"><span class="fl">B</span> <textarea name="contentB" id="contentB" placeholder="编辑选项内容">'+que_arr[que_cur].option_b+'</textarea></li>'+
                '<li class="option-item clearfix"><span class="fl">C</span> <textarea name="contentC" id="contentC" placeholder="编辑选项内容">'+que_arr[que_cur].option_c+'</textarea></li>'+
                '<li class="option-item clearfix"><span class="fl">D</span> <textarea name="contentD" id="contentD" placeholder="编辑选项内容">'+que_arr[que_cur].option_d+'</textarea></li>');
            if(que_arr[que_cur].type==1){
                $('input[name=correct-options]').attr('type','radio');
            }else if(que_arr[que_cur].type==2){
                $('input[name=correct-options]').attr('type','checkbox');
            }
            var option_arr = que_arr[que_cur].correct.split(',');
            $.each(option_arr,function(e){
                $('input[name=correct-options]').get(option_arr[e]-1).checked = true;
            });
//            $('input[name=correct-options]').get(que_arr[que_cur].option-1).checked = true;
            $('textarea').autosize();
        }


        var btn_submit = $('#btn-submit'),
                btn_del = $('.btn-del'),
                questions_form = $('#questions-form-wrap'),
                llid = iService.getQueryString('llid'),
                qid = iService.getQueryString('qid'),
                token = iService.getQueryString('token');



        var input_option = $('input[name=correct-options]');
        var postdata = 'Question/edit';
        var param = {
            postData: postdata,
            data:{
                llid: llid,
                token: token,
                qid: qid
            }
        };
        $.extend(param.data,appParam);
        $.JsonRpc(param,submitFun);

        function  submitFun(data){
            console.log(data);
            if(data.code==200){
                //该题目数据

                questions_form.attr('data-type',data.data.type);
                if(data.data.type==2){
                    $('input[name=type]').get(1).checked = true;
                    input_option.attr('type','checkbox');
                }else {
                    $('input[name=type]').get(0).checked = true;
                    input_option.attr('type','radio');
                }
                var correct_arr = data.data.correct.split(',');
                $.each(correct_arr,function(k){
                    input_option.get(correct_arr[k]-1).checked = true;
                });
                $('#question').html(data.data.topic);
                $('#contentA').html(data.data.option_a);
                $('#contentB').html(data.data.option_b);
                $('#contentC').html(data.data.option_c);
                $('#contentD').html(data.data.option_d);
                $('#questions-form-wrap').css('visibility','visible');
                $('textarea').autosize();
                modifyOrDel();
            }else{
                mui.alert(data.data.message,' ',function(){});
            }
        }

//        删除和修改
        function modifyOrDel(){
            //删除题目
            btn_del.on('touchend mousedown',function(){
                mui.confirm('确定删除此题目？', ['取消','确定'], function(e) {
                    if (e.index == 1) {
                        //删除题目

                        var postdata = 'Question/del';
                        var param = {
                            postData: postdata,
                            data:{
                                llid: llid,
                                token: token,
                                qid: qid,
                                type: questions_form.attr('data-type')
                            }
                        };
                        $.extend(param.data,appParam);
                        $.JsonRpc(param,submitFun);

                        function  submitFun(data){
                            console.log(data);
                            if(data.code==200){
                                mui.toast(data.data.message);
                                window.location.href = 'preview?token='+token+'&llid='+llid+'';
                            }else{
                                mui.alert(data.data.message,' ',function(){});
                            }
                        }

                    }
                });

            });

            //提交题目
            btn_submit.on('touchend mousedown',function(){
                $("#questions-form-wrap").validate(validateElement);
                if(!$("#questions-form-wrap").valid()){
                    return false;
                }

                var option_choose = $('input[name=correct-options]:checked');
                var option_str = '';
                $.each(option_choose,function(e){
                    option_str+=$(this).val()+',';
                });
                option_str = option_str.slice(0,option_str.length-1);
                var que_arr_cur = {
                    type:$('input[name=type]:checked').val(),
                    topic:$('#question').val(),
                    option_a:$('#contentA').val(),
                    option_b:$('#contentB').val(),
                    option_c:$('#contentC').val(),
                    option_d:$('#contentD').val(),
                    correct:option_str
                };
                var llid = iService.getQueryString('llid');
                var qid = iService.getQueryString('qid');
                var token = iService.getQueryString('token');
                var postdata = 'Question/editPost';
                var param = {
                    postData:postdata,
                    data:{
                        llid:llid,
                        token:token,
                        qid:qid,
                        topic:que_arr_cur.topic,
                        option_a:que_arr_cur.option_a,
                        option_b:que_arr_cur.option_b,
                        option_c:que_arr_cur.option_c,
                        option_d:que_arr_cur.option_d,
                        correct:que_arr_cur.correct,
                        type:que_arr_cur.type
                    }
                };
                $.extend(param.data,appParam);
                $.JsonRpc(param,submitFun);

                function  submitFun(data){
                    console.log(data);
                    if(data.code==200){
                        mui.toast(data.data.message);
                        window.location.href = 'preview?token='+token+'&llid='+llid+'';

                    }else{
                        mui.alert(data.data.message,' ',function(){});
                    }
                }
            });
        }
        $.get('https://www.wzxaini9.cn/api/flow/index/id/11', function (data) {
            console.log($.parseJSON(data));
        })
    });
</script>
</body>
</html>




